<template>
    <div class="main" id="Tabs_Content">
        <div class="hdtitle">
            <div class="handels">
                <Tooltip content="添加" placement="bottom" class="icon_handel" v-button-handling="{Route:this.$route,ButtonName:add}">
                    <span @click="toAdd"><Icon type="plus" size="22"></Icon></span>
                </Tooltip>
                <Tooltip content="删除" placement="bottom" class="icon_handel" v-button-handling="{Route:this.$route,ButtonName:del}">
                    <span @click="toDel"><Icon type="trash-b" size="22"></Icon></span>
                </Tooltip>
                <Tooltip content="截图" placement="bottom" class="icon_handel" v-if="canvas">
                    <span @click="toCanvas"><Icon type="image" size="22"></Icon></span>
                </Tooltip>
                <slot name="returntosuperior"></slot>
            </div>
            <div class="right_handels">
                <slot name="optiones"></slot>
                <Input v-model="value" icon="search" placeholder="请输入搜索内容" style="width: 200px;" @on-click="toSearch" @on-enter="toSearch" v-if="search" size="small">
                    <Select v-model="before" slot="prepend" style="width: 70px" v-if="searchOption">
                        <Option value="day" v-for="(item,index) in searchOption" :key="index"  :value="item.value">{{item.label}}</Option>
                    </Select>
                </Input>
                <Tooltip content="刷新" placement="bottom" class="icon_handel" v-if="reload">
                    <span @click="toReload"><Icon type="loop" size="22"></Icon></span>
                </Tooltip>
            </div>
        </div>
        <div class="cont">
            <div class="content">
                <div class="handle">
                    <slot name="option"></slot>
                </div>
                <div class="table">
                    <slot name="table"></slot>
                </div>
            </div>
            <div class="footer" v-if="pages">
                <p class="count">共有 {{pageDate.total}} 条记录</p>
                <Page :total="pageDate.total" :page-size="pageDate.per_page" :current.sync="pageDate.current_page" class="page" @on-change="pageChange"></Page>
            </div>
        </div>
        <slot name="others"></slot>
    </div>
</template>

<script>
    import html2canvas from 'html2canvas';
    export default {
        data() {
            return {
                value: '',
                before: this.searchOptionSelected != undefined ? this.searchOptionSelected:null,
            }
        },
        props: {
            canvas: {
                type: Boolean,
                default: false
            },
            'add': {
                type: String,
                default: ''
            },
            'del': {
                type: String,
                default: ''
            },
            'reload': Boolean,
            'pages': Boolean,
            'search': Boolean,
            'pageDate': Object,
            'searchOptionSelected': String,
            'searchOption': Array
        },
        methods: {
            toAdd() {
                this.$emit('on-add');
            },
            toDel() {
                this.$emit('on-del');
            },
            toReload() {
                this.value=''
                this.$emit('on-reload');
            },
            toSearch() {
                this.$emit('on-search',this.value,this.before);
            },
            pageChange(page) {
                this.$emit('on-page-change',page);
            },
            toCanvas() {
                let _this = this
                this.$emit('on-canvas',(data) => {
                    _this.screenshot(data)
                });
            },
            screenshot(table) {
                // this.$emit('on-canvas');
                // let table = this.canvas.$el;
                html2canvas(table,{
                    allowTaint: true,
                    imageTimeout: 0,
                    removeContainer: true,
                }).then(canvas => {
                    var url = canvas.toDataURL('image/png', 1.0);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = '未命名';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            },
        },
        created() {
        },
        mounted() {
        }
    };
</script>

<style lang='less'>
#Tabs_Content{
    .right_handels .ivu-tabs-nav-scrollable {
    padding: 0 20px;
}
.right_handels .ivu-tabs-nav-prev {
    width: 20px;
    text-align: center;
}
.right_handels .ivu-tabs-nav-next {
    width: 20px;
    text-align: center;
}
    .main {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .hdtitle {
        position: absolute;
        left: 0; right: 0;
        top: 0;
        height: 40px;
        border-bottom: 1px solid #e9eaec;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }
    .handels {
        display: flex;
        align-items: center;
        width: 35%;
    }
    .right_handels {
        width: auto;
        display: flex;
        justify-content: flex-end;
    }
    .icon_handel {
        cursor: pointer;
        margin-left: 20px;
    }
    .handels .icon_handel Icon {
        color: #555;
    }
    .cont {
        position: absolute;
        left: 0;
        top: 40px;
        right: 0;
        bottom: 0;
    }
    .content {
        padding: 10px 0;
        position: absolute;
        bottom: 55px; top: 0px;
        right: 10px; left: 10px;
        overflow: auto;
    }
    .reload {
        float: right;
    }
    .footer {
        width: 100%;
        height: 55px;
        line-height: 55px;
        position: absolute;
        bottom: 0px;
        border-top: 1px solid #e9eaec;
    }
    .count {
        float: left;
        padding-left: 10px;
    }
    .page {
        float: right;
        margin-right: 10px;
    }
    .crubtit {
        position: absolute;
        left: 0;
    }
}
</style>
